<settings-screen>
  <div class="">
    <form name="snippetForm" class="form">
      <div class="form-group">
        <label>Trigger</label>
        <input type="string" class="form-control" ng-model="$ctrl.snippet.trigger" ng-disabled="!$ctrl.canEdit" required autofocus>
      </div>

      <div class="form-group">
        <label>Description</label>
        <input type="string" class="form-control" ng-model="$ctrl.snippet.description" ng-disabled="!$ctrl.canEdit">
      </div>

      <div class="form-group">
        <label>Snippet</label>
        <pre ng-if="!$ctrl.canEdit">{{$ctrl.snippet.snippet}}</pre>
        <div ui-ace="$ctrl.editorOptions" ng-model="$ctrl.snippet.snippet" style="height:300px" ng-if="$ctrl.canEdit"></div>
      </div>

      <div class="form-group" ng-if="$ctrl.canEdit">
        <button class="btn btn-primary" ng-disabled="!snippetForm.$valid" ng-click="$ctrl.saveChanges()">Save</button>
        <button class="btn btn-danger" ng-if="$ctrl.snippet.id" ng-click="$ctrl.delete()">Delete</button>
      </div>
      <small ng-if="$ctrl.snippet.user">
        Created by: 
        <img ng-src="{{$ctrl.snippet.user.profile_image_url}}" class="profile__image_thumb"/>
        {{$ctrl.snippet.user.name}}
      </small>
    </form>
  </div>
</settings-screen>
